<template>
  <div class="demo">
    <div class="demo-title">最多显示多少个选项及选项最大长度</div>
    <div class="demo-content">
      <Space direction="vertical" style="width: 100%">
        <Space>
          <Button type="primary" @click="maxTagCount++">maxTagCount++</Button>
          <Button type="primary" @click="maxTagCount--">maxTagCount--</Button>
        </Space>
        <h2>maxTagCount: {{ maxTagCount }}</h2>
        <Select
          v-model:value="value"
          mode="multiple"
          style="width: 100%"
          placeholder="Select Item..."
          :max-tag-count="maxTagCount"
          :options="options"
        >
          <template #maxTagPlaceholder="omittedValues">
            <span style="color: red">+ {{ omittedValues.length }} ...</span>
          </template>
        </Select>
        <h2>maxTagCount: responsive</h2>
        <Select
          v-model:value="value"
          mode="multiple"
          style="width: 100%"
          placeholder="Select Item..."
          max-tag-count="responsive"
          :options="options"
        />
        <Space>
          <Button type="primary" @click="maxTagTextLength++">maxTagTextLength++</Button>
          <Button type="primary" @click="maxTagTextLength--">maxTagTextLength--</Button>
        </Space>
        <h2>maxTagTextLength: {{ maxTagTextLength }}</h2>
        <Select
          v-model:value="value"
          mode="multiple"
          style="width: 100%"
          placeholder="Select Item..."
          :max-tag-text-length="maxTagTextLength"
          :options="options"
        />
      </Space>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Button from '@sscd/button';
  import Space from '@sscd/space';
  import Select from '@sscd/select';
  import type { SelectProps } from '@sscd/select';
  const value = ref(['a10', 'c12', 'h17', 'j19', 'k20']);
  const options = ref<SelectProps['options']>([]);
  for (let i = 10; i < 36; i++) {
    const val = i.toString(36) + i;
    options.value?.push({ label: `Long Label: ${val}`, value: val });
  }
  const maxTagCount = ref(2);
  const maxTagTextLength = ref(10);
</script>
